<template lang="pug">
  .choosePage
    .content
      .btn
        img(src="static/image/dig.png" @click="changePage('/chooseType/1')" @mouseenter='show' @mouseleave="leave")
        p 挖参
      .btn
        img(src="static/image/alchemy.png" @click="changePage('/chooseType/2')" @mouseenter='show1' @mouseleave="leave1")
        p 炼丹
    .digHidden
      span 挖参 ：
      p 布勒挖参模式规则为：挖参游戏由至少3位玩家组成，在活动开始时间内，玩家选择性投入游戏种子（金种子、银种子、铜种子），种子数量满10000，则开启游戏进行挖参。 
    .alchemyHidden
      span 炼丹：
      p 布勒炼丹模式规则为：活动开始后，玩家进入游戏后，可选择性投入BPX或USDT进行游戏，根据投入BPX或USDT数量进行     
  //
</template>
<script>
import $ from "jquery";
export default {
  name: "choosePage",
  data() {
    return {
      alchemyIsOpen: 1,
      ginsenIsOpen: 1,
      flag: false
    };
  },
  mounted() {
    this.$parent.flag1 = false;
    this.$parent.flag2 = false;
    $(".choosePage").height($(window).height());
    $(window).resize(function() {
      $(".choosePage").height($(window).height());
    });
  },
  created() {
  },
  methods: {
    changePage(d) {
      this.$router.push({ path: d });
     
    },
    show(){
      $('.digHidden').css({'display':'block'})
    },
    leave(){
      $('.digHidden').css({'display':'none'})
    },
    show1(){
      $('.alchemyHidden').css({'display':'block'})
    },
    leave1(){
      $('.alchemyHidden').css({'display':'none'})
    },
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.choosePage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 1200px;
  min-height: 800px;
  background-image: url('../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .content {
    display: flex;
    justify-content: center;
    width: 500px;

    .btn {
      width: 150px;
      cursor: pointer;
      &:first-child {
        margin-right: 180px;
      }

      img {
        width: 100%;
        height: auto;
        cursor: pointer;
      }

      p {
        margin-top: 30px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 1px rgba(126, 61, 3, 0.8);
        text-shadow: 0 2.5px #916313, 2px 0 #916313, -2px 0 #916313, 0 -2px #916313;
      }
    }
  }
  .digHidden,.alchemyHidden{
    display:none;
    width: 418px;
    height: 197px;
    background-image: url('../../static/image/borderOpacity.png');
    background-size: 100% 100%;
    position: absolute;
    bottom: 14%;
    left: 30%;
    padding: 40px 20px;
    span {
      font-size:16px;
      color : #7f5200;
      font-family:"MicrosoftYaHei"; 
      font-weight:bold;
    }
    p{
      font-size:16px;
      color : #7f5200;
      font-family:"MicrosoftYaHei";
      line-height: 30px; 
    }
  }
  .alchemyHidden{
    left: 48%!important;
  } 
@media (min-width: 1280px) {
 .digHidden{
   bottom: 7%!important;
    left: 20%!important;
 }
 .alchemyHidden{
    left: 48%!important;
    bottom: 7%!important;
  }
} 
@media (min-width: 1366px) {
 .digHidden{
   bottom: 6%!important;
    left: 22%!important;
 }
 .alchemyHidden{
    left: 48%!important;
    bottom: 6%!important;
  }
} 
@media (min-width: 1440px) {
 .digHidden{
   bottom: 6%!important;
    left: 24%!important;
 }
 .alchemyHidden{
    left: 48%!important;
    bottom: 6%!important;
  }
} 

@media (min-width: 1680px) {
 .digHidden{
   bottom: 14%!important;
    left: 27%!important;
 }
 .alchemyHidden{
    left: 48%!important;
    bottom: 14%!important;
  }
} 
@media (min-width: 1920px) {
 .digHidden{
   bottom: 14%!important;
    left: 30%!important;
 }
 .alchemyHidden{
    left: 48%!important;
    bottom: 14%!important;
  }
} 
}
</style>
